<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑学习网</title>
</head>

<body>
    <!-- 
        v-model 应用于其他表单数据
            常见的表单元素都可以使用v-model绑定关联->快速获取或设置表单元素的值他会根据控件类型自动选取正确的方法 来更新元素

            输入框 input->text           ->value
            文本域 input->textarea       ->value
            复选框 input->checkbox       ->checked
            单选框 input->radio          ->checked
            下拉菜单 select               ->value
            .....
    -->
    <div id="app">
        <h1>小黑学习网</h1>
        姓名：
        <input type="text" v-model="username"><br>
        是否单身：
        <input type="checkbox" v-model="isSingle"><br>

        <!-- 
            前置理解：
                1.name:给单选框加上name属性， 可以分组 -> 同一组会互斥 只能选一个
                2.value：给单选框加上value属性，用于提交给后台的数据
                结合vue使用 v-model 设置value值 1男 2女
        -->
        性别：
        <input v-model="value" type="radio" name="sex" value="1">男
        <input v-model="value" type="radio" name="sex" value="2">女
        <br>
        <!-- 
            前置理解：
                1.option 需要设置 value值，提交给后台
                2.select 的 value值，关联选中的option的值
                结合vue使用 v-model 设置select的value值
        -->
        所在城市：
        <select v-model="number">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">成都</option>
            <option value="104">天津</option>
        </select><br>
        自我描述：<br>
        <textarea v-model="text"></textarea>
        <button>立即注册</button>
    </div>

    <script src="./script/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                isSingle: true,
                value: '1', //1男 2女
                number: '102', //对应 option的value
                text: ''
            }
        })
    </script>
</body>

</html>